import PubSub from 'pubsub-js';
import request from "../../utils/request";
import moment from "moment";
// 获取全局实例
const appInstance = getApp();
Page({

  /**
   * 页面的初始数据
   */
  data: {
    isPlay: false,  // 音乐是否播放
    songInfo: {}, // 歌曲详细数据
    musicId: -1,  // 音乐id,初始值为 -1
    musicLink: '',  // 音乐链接
    currentTime: '00:00', // 当前播放位置
    duration: '00:00',  // 总时长
    currentWidth: 0,  // 实时进度条的宽度
    moving: false, // 进度条是否在拖动中
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    // options：用于接收路由跳转的 query参数
    // 原生小程序中路由传参对参数的长度有限制，如果参数长度过长会自动截取掉
    // console.log(JSON.parse(options.song));
    let musicId = options.musicId;
    this.setData({
      musicId: parseInt(musicId)
    })
    // console.log(typeof this.data.musicId, this.data.musicId)
    // console.log(typeof appInstance.globalData.musicId, appInstance.globalData.musicId)
    // console.log(appInstance.globalData.musicId === this.data.musicId)
    // 获取歌曲详情数据
    this.getMusicInfo(musicId);

    // 判断当前页面音乐是否在播放
    if (appInstance.globalData.isMusicPlay && appInstance.globalData.musicId === this.data.musicId) {
      // 修改当前页面音乐播放状态为 true
      this.setData({
        isPlay: true
      })
    }

    // 判断是否是另一首歌曲的详情页面,是的话让歌曲自动播放
    if (appInstance.globalData.musicId !== this.data.musicId) {
      this.musicControl(true, musicId);
    }

    // 创建控制音乐播放的实例
    this.backgroundAudioManager = wx.getBackgroundAudioManager();
    // 监视音乐播放\暂停\停止
    this.backgroundAudioManager.onPlay(() => {
      this.changePlayState(true);
      // 修改全局音乐id
      appInstance.globalData.musicId = this.data.musicId;
    });
    this.backgroundAudioManager.onPause(() => {
      this.changePlayState(false);
    });
    this.backgroundAudioManager.onStop(() => {
      this.changePlayState(false);
    });
    // 监听音乐播放自然结束
    this.backgroundAudioManager.onEnded(() => {
      // 订阅来自 recommend页面发布的消息
      this.pubSub_musicId();
      // 自动切换至下一首音乐，并且自动播放
      PubSub.publish('switchType', 'next');
      this.setData({
        currentWidth: 0,
        currentTime: '00:00'
      })
    });
    // 监听音乐实时播放的进度
    this.backgroundAudioManager.onTimeUpdate(() => {
      // console.log('总时长', this.backgroundAudioManager.duration);
      // console.log('总时长', this.backgroundAudioManager.currentTime);
      if (!this.data.moving) {
        // 格式化实时播放的时间
        this.currentTime = moment(this.backgroundAudioManager.currentTime * 1000).format('mm:ss');
        // 当前宽度等于：（实时播放的时间 / 歌曲总时间） * 总宽度
        this.currentWidth = this.backgroundAudioManager.currentTime /
          this.backgroundAudioManager.duration * 450;
        this.setData({
          currentTime: this.currentTime,
          currentWidth: this.currentWidth
        })
      }
    });
  },
  // 修改播放状态的功能函数
  changePlayState(isPlay) {
    // 修改 isPlay（音乐是否播放） 的状态
    this.setData({
      isPlay
    })
    // 修改全局音乐播放的状态
    appInstance.globalData.isMusicPlay = isPlay;
  },

  // 获取歌曲详情数据
  async getMusicInfo(musicId) {
    let songInfoData = await request('song/detail', {ids: musicId});
    // songInfoData.songs[0].dt 为歌曲总时长，单位是 ms
    let durationTime = moment(songInfoData.songs[0].dt).format('mm:ss');
    this.setData({
      songInfo: songInfoData.songs[0],
      durationTime
    });
    // 动态修改窗口标题
    wx.setNavigationBarTitle({
      title: this.data.songInfo.name
    })
  },

  // 点击播放或暂停的回调
  handleMusicPlay() {
    let isPlay = !this.data.isPlay;
    // this.setData({
    //   isPlay
    // });
    let {musicId, musicLink} = this.data;
    this.musicControl(isPlay, musicId, musicLink);
  },

  // 控制音乐播放和暂停的功能函数
  async musicControl(isPlay, musicId, musicLink) {
    if (isPlay) { // 音乐播放
      // 获取音乐播放链接
      if (!musicLink) {
        // 获取音乐播放链接
        let musicLinkData = await request('song/url', {id: musicId})
        musicLink = musicLinkData.data[0].url
        this.setData({
          musicLink
        })
      }
      // 当设置了新的 src 时，会自动开始播放
      this.backgroundAudioManager.src = musicLink;
      this.backgroundAudioManager.title = this.data.songInfo.name;
    } else {  // 暂停音乐
      this.backgroundAudioManager.pause();
    }
  },

  // 点击切歌的回调
  handleSwitch(event) {
    // 获取切歌类型
    let type = event.currentTarget.id;
    // 关闭当前播放的音乐
    this.backgroundAudioManager.stop();
    // 订阅来自 recommend页面发布的消息
    this.pubSub_musicId();
    // 发布消息数据给 recommend 页面
    PubSub.publish('switchType', type);
  },

  // 点击“应用按钮”的回调
  handleSoft() {
    // this.backgroundAudioManager.seek(180)
  },

  // 进行订阅的功能函数(若收到消息,则根据收到的 id 切换对应歌曲)
  pubSub_musicId() {
    // 订阅来自 recommend页面发布的消息
    PubSub.subscribe('musicId', (msg, musicId) => {
      // console.log(musicId)
      this.setData({
        musicId
      })
      // appInstance.globalData.musicId = musicId;
      // console.log(appInstance.globalData.musicId)
      // 获取歌曲详情数据
      this.getMusicInfo(musicId);
      // 自动播放当前音乐
      this.musicControl(true, musicId);
      // console.log(musicId);
      PubSub.unsubscribe('musicId');
    });
  },

  // 点击进度条的回调
  handleSliderStart(event) {
    // 获取进度条当前宽度
    this.getCurrentWidth(event.touches[0].pageX);
    this.setData({
      moving: true,
    })
  },

  // 拖动进度条的回调
  handleSliderMove(event) {
    // 获取进度条当前宽度
    this.getCurrentWidth(event.touches[0].pageX);
  },

  // 松开小圆球的回调
  handleSliderEnd() {
    // 点击处对应的音乐播放时间：点击处的宽度 / 总宽度 * 总时间
    let Time = (this.data.currentWidth / 450) * this.backgroundAudioManager.duration;
    this.backgroundAudioManager.seek(Time);
    this.backgroundAudioManager.play();
    this.setData({
      moving: false
    })
  },

  // 获取进度条当前宽度并存入 data 中的功能函数
  getCurrentWidth(x) {
    this.currentX = (x - 75) * 2;
    (this.currentX < 0) && (this.currentX = 0) ||
    (this.currentX > 450) && (this.currentX = 450)
    this.setData({
      currentWidth: this.currentX
    })
  },




  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})
